<template>
  <div class="app-container">
    <div class="toolbar">
      <el-button type="primary" @click="handleAddFeedback">新增</el-button>
      <el-button type="danger" @click="handleDeleteFeedback" :disabled="!multipleSelection.length"
        >删除</el-button
      >
    </div>
    <Tabel
      :tableData="tableData"
      :cols="cols"
      :isSelect="true"
      @selection-change="handleSelectionChange"
    >
      <template #operationCol>
        <el-table-column>
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEditFeedback(row)">处理反馈</el-button>
          </template>
        </el-table-column>
      </template>
    </Tabel>
    <el-dialog
      :title="submitType ? '处理反馈' : '新增'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="formData" label-width="120px">
          <el-form-item
            v-for="item of cols"
            :key="item.key"
            :label="item.label"
            :prop="item.key"
            :required="item.required"
          >
            <el-input
              v-if="!item.notAllowEdit || !submitType"
              v-model="formData[item.key]"
            ></el-input>
            <template v-else>
              <span>
                {{ item.formatter ? item.formatter(formData) : formData[item.key] }}
              </span>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Tabel from '@/components/Table'
  import {
    getFeedbackList,
    addFeedback,
    editFeedback,
    deleteFeedback
  } from '@/api/TeachingCenter/feedbackManage'
  import { parseTime } from '@/utils'
  export default {
    name: 'feedbackManage',
    components: { Tabel },
    data() {
      return {
        tableData: [],
        cols: [
          {
            key: 'userName',
            label: '反馈者',
            notAllowEdit: true
          },
          {
            key: 'staffName',
            label: '处理者',
            notAllowEdit: true
          },
          {
            key: 'handleContent',
            label: '处理结果'
          },
          {
            key: 'feedbackContent',
            label: '	反馈内容',
            required: true
          },
          {
            key: 'createTime',
            label: '反馈时间',
            notAllowEdit: true,
            formatter(row) {
              if (row.createTime) {
                return parseTime(row.createTime)
              }
            }
          },
          {
            key: 'contactInfo',
            label: '联系方式'
          }
        ],
        multipleSelection: [],
        dialogVisible: false,
        formData: {},
        submitType: null //0：新增,1:修改
      }
    },
    created() {
      this._getFeedbackList()
    },
    methods: {
      async _getFeedbackList() {
        const { data } = await getFeedbackList({})
        console.log(data)
        this.tableData = data.records
      },
      handleAddFeedback() {
        this.dialogVisible = true
        this.submitType = 0
        this.formData = Object.assign({})
      },
      handleEditFeedback(row) {
        this.formData = { ...row }
        this.submitType = 1
        this.dialogVisible = true
      },
      handleDeleteFeedback() {
        this.$confirm('是否进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const ids = this.multipleSelection.map((item) => item.classNo)
          await deleteFeedback({ ids })
          this._getFeedbackList()
          this.$Msg.success('删除成功!')
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      async submit() {
        const submitArr = [addFeedback, editFeedback]
        const parmas = this.formData
        await submitArr[this.submitType](parmas)
        this._getFeedbackList()
        this.$Msg.success('操作成功!')
        this.dialogVisible = false
      }
    }
  }
</script>
